<template>
  <header>
    <div class="header">
      <div class="stage_top common-padding">
        <p class="starg_title">欧美外教+中教，说得多，学得好！</p>
      </div>
    </div>
    <div class="user-info">
      <div class="user-content common-padding">
        <div class="user-base-title">
          <div class="user-subject">
            <span class="user-title-text">2018春季AE英语</span>{{userInfo.level}}
          </div>
          <div class="user-test">
            <span>{{userInfo.stage}}</span><span class="unit-text">{{userInfo.unit}}</span>
          </div>
        </div>
        <dl class="user-item">
          <dt class="user-photo">
            <img :src="userInfo.url" :alt="userInfo.name">
          </dt>
          <dd class="user-name">{{userInfo.name}}</dd>
        </dl>
        <div class="progress-box">
          <div class="progress-mark" v-bind:style="{'margin-left':markWidth}"></div>
          <div class="progress-item-bg">
            <div class="progress-item-active" v-bind:style="{'width':progressWidth + '%'}"></div>
          </div>
          <div class="progress-label">
            <span class="left">Pre<i class="label-des-text">k</i></span>
            <span class="center" v-if="userInfo.learningstage > 1 && userInfo.learningstage < 14"
                  v-bind:style="{'margin-left':centerWidth}">{{userInfo.level}}</span>
            <span class="right">level 12</span>
          </div>
        </div>
      </div>
      <!--话术-->
      <text-modal class="padding-no">
        <p slot="header-message">
          Xxx孩子妈妈您好，我是学而思网校的英语辅导老师xxx，非常感谢您在百忙之中接听我的电话，这次来电的主要是为了对咱家孩子最近在网校的学习状况做一次反馈。
          先简单了解一下，您觉得目前学习了这么久，孩子身上有什么变化吗？背单词、读书、成绩等等都可以。
          <span class="message-text-distance">（主要1.引导家长效果外化；2. 了解家长想法为后面做一些准备；）好的，我大概了解了，那我先简单和您沟通一下孩子的学习数据及情况；</span>
        </p>
      </text-modal>
    </div>
  </header>
</template>
<script>
  import TextModal from '@/components/textModal'

  export default {
    props: ['userInfo'],
    data () {
      return {}
    },
    components: {
      TextModal
    },
    computed: {
      progressWidth () {  //  激活的进度条的位置
        if (this.userInfo.learningstage == 1) {
          return 0
        } else if (this.userInfo.learningstage == 14) {
          return 100
        } else {
          return (12.5 + this.userInfo.learningstage / 12 * 60)
        }
      },
      markWidth () {  // 计算小标记的位置
        return (this.progressWidth == 0) ? this.progressWidth + '%' : 'calc(' + this.progressWidth + '% - 0.15rem)'
      },
      centerWidth () {  // 下面我的level的显示位置
        return this.userInfo.learningstage == 2 ? (this.progressWidth - 2) + '%' : (this.progressWidth == 0 || this.progressWidth == 100) ? this.progressWidth : 'calc(' + this.progressWidth + '% - 0.5rem)'
      }
    }
  }
</script>
<style type="text/css" scoped>
  .padding-no {
    padding: 0 !important;
  }

  body {
    background-color: #fd8f00;
  }
  .user-title-text{
    margin-right: .1rem;
  }
  /* 进度条 */
  .progress-mark {
    width: .2rem;
    height: .28rem;
    font-size: .24rem;
    background: url('../assets/img/stage_location.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: .07rem;
  }

  .progress-label .center {
  }

  .progress-label .left {
    position: absolute;
    left: 0;
  }

  .progress-label .right {
    position: absolute;
    right: 0;
  }

  .progress-label {
    position: relative;
    font-size: .24rem;
    color: #fd8f00;
    margin-top: .14rem;
    font-weight: 600;
    height: .36rem;
  }

  .label-des-text {
    font-style: normal;
    margin-left: 0.1rem;
  }

  .progress-item-active {
    position: absolute;
    left: 0;
    height: .18rem;
    background: linear-gradient(left, #ffdd00, #fd8f00);
    border-radius: 0.09rem;
  }

  .progress-item-bg {
    position: relative;
    width: 100%;
    height: .18rem;
    background-color: #ffecd3;
    border-radius: 0.09rem;
  }

  .user-base-title .user-test {
    color: #f96900;
    font-size: .24rem;
    font-weight: 500;
    margin-top: .06rem;
  }

  .user-test .unit-text {
    margin-left: .1rem;
  }

  .user-base-title .user-subject {
    color: #f96900;
    font-size: .28rem;
    font-weight: 600;
    background: url("../assets/img/user_title_bg.png") no-repeat center;
    background-size: 5.97rem .18rem;
  }

  .user-base-title {
    padding-top: .3rem;
    margin: 0 auto;
    text-align: center;
  }

  .user-content .progress-box {
    padding: 0 .05rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: .08rem;
  }

  /* 用户信息 */
  span {
    display: inline-block;
    vertical-align: center;
  }

  .user-photo > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .user-photo {
    float: left;
    width: 1.1rem;
    height: 1.1rem;
  }

  .user-item {
    overflow: hidden;
    padding: .1rem 0 0 .1rem;
  }

  .user-name {
    font-size: .32rem;
    font-weight: bold;
    color: #111111;
    line-height: 1.1rem;
    margin-left: .2rem;
    float: left;
  }

  .common-padding {
    padding: 0 .2rem;
    box-sizing: border-box;
  }

  .header {
    width: 100%;
    height: 5.22rem;
    background: url("../assets/img/stage_hader.jpg") no-repeat;
    background-size: 100% 100%;

  }

  .stage_top {
    padding-top: 1px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .starg_title {
    padding-left: .22rem;
    margin-top: 4.1rem;
    font-size: .28rem;
    color: #fff;
    font-weight: 900;
    line-height: .6rem;
    text-align: left;
  }

  .user-content {
    margin: 0 .2rem;
    background: url('../assets/img/stage_unit_bg.png') repeat;
    background-size: .22rem .22rem;
    padding-bottom: .3rem;
    border-radius: .12rem;
    box-shadow: 0px 1px 3px -1px #999;
  }

  .user-info {
    width: 100%;
    padding-bottom: .2rem;
    background: url("../assets/img/user_bg.png") no-repeat;
    background-size: 100% 4.28rem;
    background-color: #ffd02b;
    box-sizing: border-box;
  }
</style>

